<template>
  <div class="totalShhet">
      <!-- <div class="form_top">
          <div class="top_left">
              <span>考核分组：</span>
                <a-select default-value="重庆高洁集团" style="width: 120px" @change="handleChange">
                    <a-select-option value="重庆高洁集团">
                        重庆高洁集团
                    </a-select-option>
                </a-select>
          </div>
          <div class="top_right">
            <a-button type="primary">
                重置
            </a-button>
            <a-button>查询</a-button>
          </div>
      </div> -->
      <div class="form_bottom">
        <a-table  bordered :dataSource="totalForm" :columns="columns" :rowKey="(record, index) => index" :pagination="false">
            <template slot="areaName" slot-scope="text, record">{{record.name}}</template>
            <template slot="totalToi" slot-scope="text, record">{{record.all}}</template>
            <template slot="firstType" slot-scope="text, record">{{record.level1}}</template>
            <template slot="secondType" slot-scope="text, record">{{record.level2}}</template>
            <template slot="thirdType" slot-scope="text, record">{{record.level3}}</template>
            <template slot="fixation" slot-scope="text, record">{{record.type1}}</template>
            <template slot="move" slot-scope="text, record">{{record.type2}}</template>
            <template slot="other" slot-scope="text, record">{{record.type3}}</template>
        </a-table>
      </div>
  </div>
</template>

<script>
import {getFacilityStatement} from '../../api'
export default {
    data() {
        return {
            columns: [
              { 
                title: "区名", 
                scopedSlots: { customRender: "areaName" }
              },
              { 
                title: "公厕总数", 
                scopedSlots: { customRender: "totalToi" }
              },
              {
                title: "一级数量",
                scopedSlots: { customRender: "firstType" }
              },
              {
                title: "二级数量",
                scopedSlots: { customRender: "secondType" }
              },
              {
                title: "三级数量",
                scopedSlots: { customRender: "thirdType" }
              },
              {
                title: "固定",
                scopedSlots: { customRender: "fixation" }
              },
              {
                title: "移动",
                scopedSlots: { customRender: "move" }
              },
              {
                title: "其它",
                scopedSlots: { customRender: "other" }
              },
            ],
            totalForm:[]
        }
    },
    mounted(){
      this.getTotalSheetData()
    },
    methods: {
      handleChange(value) {
        console.log(`selected ${value}`);
      },
      async getTotalSheetData(){
        let res = await getFacilityStatement()
        this.totalForm = res
      }
    },
}
</script>

<style lang="less">
.totalShhet{
  padding: 24px;
    .form_top{
        display: flex;
        justify-content: space-between;
        padding: 5px 5px 50px 20px;
    }
}
</style>